<template>
  <view class="list-box">
    <navigator
      :url="'/pages/detail/index?id=' + item.id"
      v-for="item in list"
      :key="item.id"
      hover-class="none"
    >
      <view class="list-item pd-20">
        <image
          @click.stop="goUserInfo(item.author.loginname)"
          class="item-img"
          :src="item.author.avatar_url"
        />
        <view class="item-value pd-20">
          <view class="hideTxt loginname"
            >{{ item.author.loginname }}
            <u-tag
              v-if="item.good"
              text="精华"
              mode="dark"
              size="mini"
              type="warning"
              class="ml-20"
            />
          </view>
          <view class="hideTxt">{{ item.title }}</view>
        </view>
        <view>
          <u-tag
            v-if="item.top"
            text="置顶"
            mode="dark"
            size="mini"
            type="success"
          />
          <u-tag v-else :text="filterTab(item.tab)" mode="dark" size="mini" />
        </view>
      </view>
    </navigator>
  </view>
</template>

<script>
import { goUserInfo } from "@/utils/jump.js";
import { filterTab } from "@/utils/format.js";
export default {
  data() {
    return {
      filterTab,
      goUserInfo,
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.list-box {
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #eee;

    .item-value {
      flex: 1;
      overflow: hidden;

      .loginname {
        font-weight: 700;
        margin-bottom: 5px;
      }
    }

    .item-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
}
</style>
